<template>
  <div class="transac">
    <div class="bg-c-fff">
      <h2 class="box-title rel">企业资质审核</h2>
      <div class="right-box">
        <div class="tab">
          <ul class="fix">
            <li class="flo-left cup" v-bind:class="{active:index===0}" @click="tab(0)">待审核</li>
            <li class="flo-left cup" v-bind:class="{active:index===1}" @click="tab(1)">已通过</li>
            <li class="flo-left cup" v-bind:class="{active:index===2}" @click="tab(2)">已拒绝</li>
          </ul>
          <div class="tab-inner">
            <table class="tab-con" width="100%" v-show="index===0">
              <tr>
                <th>姓名</th>
                <th>联系方式</th>
                <th>所属律所</th>
                <th>申请时间</th>
                <th>律师执业证件</th>
                <th>操作</th>
              </tr>
              <tr v-for="item in auditList">
                <td>{{item.lawyerName}}</td>
                <td>{{item.registPhone}}</td>
                <td>{{item.firmName}}</td>
                <td>{{item.createTime}}</td>
                <td><img src="../assets/ewm.jpg" alt=""></td>
                <td>
                  <button @click="onChangeBtn(item.id,1)" class="auto cup">通过</button>
                  <button @click="onChangeBtn(item.id,2)" class="auto cup">拒绝</button>
                </td>
              </tr>
            </table>
            <table class="tab-con" width="100%" v-show="index===1">
              <tr>
                <th>姓名</th>
                <th>联系方式</th>
                <th>所属律所</th>
                <th>申请时间</th>
                <th>营业执照</th>
                <th>操作</th>
              </tr>
              <tr v-for="item in passedList">
                <td>{{item.lawyerName}}</td>
                <td>{{item.registPhone}}</td>
                <td>{{item.firmName}}</td>
                <td>{{item.createTime}}</td>
                <td><img src="../assets/ewm.jpg" alt=""></td>
                <td>
                  <button class="auto cup show">通过</button>
                  <button @click="onChangeBtn(item.id,2)" class="auto cup">拒绝</button>
                </td>
              </tr>
              </tr>
            </table>
            <table class="tab-con" width="100%" v-show="index===2">
              <tr>
                <th>姓名</th>
                <th>联系方式</th>
                <th>所属律所</th>
                <th>申请时间</th>
                <th>营业执照</th>
                <th>操作</th>
              </tr>
              <tr v-for="item in rejectList">
                <td>{{item.lawyerName}}</td>
                <td>{{item.registPhone}}</td>
                <td>{{item.firmName}}</td>
                <td>{{item.createTime}}</td>
                <td><img src="../assets/ewm.jpg" alt=""></td>
                <td>
                  <button @click="onChangeBtn(item.id,1)" class="auto cup">通过</button>
                  <button class="auto cup show">拒绝</button>
                </td>
              </tr>
            </table>
          </div>
          <div class="page-box">
            <pagination :index="auditIndex" :total="auditTotal" v-show="auditList.length!==0&&index===0" @pagechange="onAuditChanged"></pagination>
            <pagination :index="passedIndex" :total="passedTotal" v-show="passedList.length!==0&&index===1" @pagechange="onPassedChanged"></pagination>
            <pagination :index="rejectedIndex" :total="rejectedTotal" v-show="rejectList.length!==0&&index===2" @pagechange="onRejectedChanged"></pagination>
          </div>
        </div>
      </div>
      <vodal :show="confirmShow" animation="zoom" :width="420" :height="300" @hide="confirmShow = false">
        <div class="vodal-box">
          <h2>通过注册律师申请</h2>
          <div class="con">您正在执行通过注册律师申请操作，
            <br>确认通过吗？</div>
          <div class="tc auto vodal-box">
            <button class="blue-button cup" @click="onConfirmBtn">确认</button>
            <button class="white-button cup" @click="confirmShow = false">取消</button>
          </div>
        </div>
      </vodal>
      <vodal :show="refuseShow" animation="zoom" :width="420" :height="300" @hide="refuseShow = false">
        <div class="vodal-box">
          <h2>通过注册律师申请</h2>
          <div class="con">您正在执行拒绝注册律师申请操作，
            <br>确认拒绝吗？</div>
          <div class="tc auto vodal-box">
            <button class="blue-button cup" @click="onConfirmBtn">确认</button>
            <button class="white-button cup" @click="refuseShow = false">取消</button>
          </div>
        </div>
      </vodal>
    </div>
  </div>
</template>
<script type="text/javascript">
import Pagination from '../components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      index: 0,
      confirmShow: false,
      refuseShow: false,
      auditIndex: 0,
      auditTotal: 0,
      auditList: [],
      passedIndex: 1,
      passedTotal: 0,
      passedList: [],
      rejectedIndex: 2,
      rejectedTotal: 0,
      rejectList: [],
      currentId: '',
      currentReview: ''
    }
  },
  mounted() {
    this.getListData(0, 1)
    this.getListData(1, 1)
    this.getListData(2, 1)
  },
  methods: {
    tab(index) {
      this.index = index
      if (this.index === 0) {
        this.getListData(0, this.auditIndex)
      }
      if (this.index === 1) {
        this.getListData(1, this.passedIndex)
      }
      if (this.index === 2) {
        this.getListData(2, this.rejectedIndex)
      }
    },
    onAuditChanged(n) {
      this.getListData(0, n)
    },
    onPassedChanged(n) {
      this.getListData(1, n)
    },
    onRejectedChanged(n) {
      this.getListData(2, n)
    },
    getListData(type, page) {
      this.$http.get('/memberLawyer/getList/lawyer/state', {
        params: {
          isReviewed: type,
          page: page,
          rows: 10
        }
      }).then((data) => {
        if (data.data.httpCode === 200) {
          if (type === 0) {
            this.auditList = data.data.rows
            this.auditIndex = page
            this.auditTotal = Math.ceil(data.data.rows.length / 10)
          }
          if (type === 1) {
            this.passedList = data.data.rows
            this.passedIndex = page
            this.passedTotal = Math.ceil(data.data.rows.length / 10)
          }
          if (type === 2) {
            this.rejectList = data.data.rows
            this.rejectedIndex = page
            this.rejectedTotal = Math.ceil(data.data.rows.length / 10)
          }
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    onChangeBtn(id, review) {
      this.currentId = id
      this.currentReview = review
      if (review === 1) {
        this.confirmShow = true
      }
      if (review === 2) {
        this.refuseShow = true
      }
    },
    onConfirmBtn() {
      this.$http.post('/memberLawyer/confirm/reviewed', {
        id: this.currentId,
        isReviewed: this.currentReview
      }).then((data) => {
        if (data.data.httpCode === 200) {
          if (this.currentReview === 1) {
            this.confirmShow = false
          }
          if (this.currentReview === 2) {
            this.refuseShow = false
          }
          if (this.index === 0) {
            this.auditList.forEach((item, index) => {
              if (item.id === this.currentId) {
                this.auditList.splice(index, 1)
              }
            })
          }
          if (this.index === 1) {
            this.passedList.forEach((item, index) => {
              if (item.id === this.currentId) {
                this.passedList.splice(index, 1)
              }
            })
          }
          if (this.index === 2) {
            this.rejectList.forEach((item, index) => {
              if (item.id === this.currentId) {
                this.rejectList.splice(index, 1)
              }
            })
          }
          this.$toasted.show('更改成功！')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}

</script>
<style type="text/css" scoped>
table {
  margin-top: 20px;
}

table td button {
  width: 80px;
  height: 31px;
  line-height: 30px;
  background-color: #3881f2;
  color: #fff;
}

table tr:nth-of-type(odd) a {
  background-color: #6ba5ff;
}

table td img {
  width: 110px;
  height: 57px;
}

table td button.show {
  background-color: #fff;
  color: #01378c;
}

.tab ul {
  height: 40px;
  line-height: 40px;
}

.tab ul li {
  border: 1px solid #01378c;
  padding: 0px 30px;
  margin-right: 10px;
  font-size: 15px;
  color: #01378c;
}

.tab ul li.active {
  background-color: #01378c;
  color: #fff;
}

.vodal-box h2 {
  background-color: #d8e7ff;
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
  text-indent: 40px;
}

.vodal-box .con {
  margin: 30px 20px;
  padding: 36px 70px;
  border: 1px solid #ddd;
  line-height: 30px;
  height: 139px;
  overflow: auto;
}

.vodal-box button {
  margin: 0 15px;
  width: 120px;
  height: 35px;
}

</style>
